<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue基础-回顾</title>
    <script src="./vue.js"></script>
    <style>
        ul li {
            list-style: none;
            padding: 10px;
        }

        .divider {
            border-bottom: 1px solid red;
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <!--
                v-for:( 元素 元素索引) in  数组
                可以用 of 替代 in 作为分隔符
            -->
            <li v-for="stu in students">
                {{hello}} <br> 学生的姓名是:{{stu.name}}
                <br> 学生的年龄是: {{stu.age}}
            </li>
        </ul>

        <!--
            key: 绑定到当前元素的唯一标识符
            以后根据key就可以知道当前DOM元素对应的数据是谁
        -->
        <ol>
            <li v-for="(stu,index) of students" :key="stu.id">
                {{hello}} <br> 编号是{{index+1}}的学生 <br> 学生的姓名是:{{stu.name}}
                <br> 学生的年龄是: {{stu.age}}
            </li>
        </ol>

        <ul>
            <!--
                template: 配合v-for,包裹html片段
                一次渲染多个标签
            -->
            <template v-for="stu in students">
                <li>{{stu.name}}</li>
                <li class="divider"></li>
            </template>
        </ul>

        <!--  2, 对象迭代   -->
        <ul>
            <li v-for="(key,value,index) in goods">
                {{key}}:{{value}}--{{index}}
            </li>
        </ul>

        <!-- 3, 整数迭代-->
        <div>
            <span v-for="n in 10">{{ n }}&#X3000;</span>
        </div>

        <!-- 4, v-for 配合 v-if -->
        <ul>
            <li v-for="stu in students" v-if="stu.age>20">
                {{stu.name}}---{{stu.age}}
            </li>
        </ul>

        <button @click="exchangeList">点击交换位置</button>

        <!-- 5, 数组更新检测  -->
        <ul>
            <li v-for="bk in books">
                {{bk}}
            </li>
        </ul>
        <button @click="modifyBooks">修改数组</button>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hello: '你好',
                students: [{
                        name: '1白',
                        age: 20,
                        id: '001'
                    },
                    {
                        name: '2白',
                        age: 22,
                        id: '002'
                    },
                    {
                        name: '3白',
                        age: 23,
                        id: '003'
                    },
                ],
                goods: {
                    name: '空调',
                    price: 2000,
                    description: '省钱高效'
                },
                books: [
                    'js基础', 'html基础', 'css基础'
                ]
            },
            methods: {
                exchangeList: function () {
                    var stu0 = this.students[0];
                    var stu1 = this.students[1];
                    // splice: 删除指定数目的元素,添加新元素
                    // para1: 开始删除的索引
                    // para2: 删除元素的数目
                    // para3,para4...添加的元素

                    // 交换数组中前两个元素的位置

                    // 当调整数据的顺序时,可以看到视图上会随之改变
                    // 怎么改变呢?
                    // 采用的是修改 li 中的内容,不是修改 li 的顺序,
                    this.students.splice(0, 2, stu1, stu0);
                },
                modifyBooks: function () {
                    // 变异方法,视图会更新

                    // this.books.push('java的编程思想');          //数组末尾添加一个元素
                    // this.books.pop();                         //数组末尾删除一个元素
                    // this.books.unshift('高效Java');          //数组开头添加一个元素
                    // this.books.shift();                     //数组开头删除一个元素
                    // this.books.splice(0,1,'大数据-python');
                    // this.books.sort();                     //数组元素排序
                    // this.books.reverse();                 //数组反转 

                    // 变异方法: 可以修改调用该方法的数组
                    // 非变异方法: 不会修改调用该方法的数组

                    // 非变异方法, 想要视图更新, 需要重塑数组

                    // filter: 根据指定规则过滤数组,返回值是满足规则的新数组
                    // 规则: 是一个函数,函数参数是数组中的每一个元素
                    // 返回值: true, 说明该元素满足规则,添加到新数组中
                    // 返回值: false, 说明该元素不满足规则,不要

                    //    var result= this.books.filter(function (item){
                    //         return item.indexOf('s')!=-1;

                    //     })
                    //     console.log(result);
                    //     this.books=result;

                    // var arr=['斗破苍穹','天珠变','傲世九重天'];
                    //     // concat: 数组拼接
                    //     // 返回值是拼接之后的新数组
                    // var result=this.books.concat(arr);
                    // console.log(result);
                    //  this.books=result;

                    // 截取数组的一部分返回
                    // para1: 开始截取的索引
                    // para2: 结束截取的索引
                    // 半开半闭区间: 包含开始不包含结束
                    // var result=this.books.slice(0,2);
                    // console.log(result);
                    // this.books=result;

                    // c: 下述写法,Vue检测不到更新,视图不会更新
                    // this.books[0]='倚天屠龙记';
                    // console.log(this.books[0]);

                    // 正确写法如下:
                    // Vue.set(this.books,0,'倚天屠龙记');
                    //  console.log(this.books[0]);
                    //  或者采用下述方法:
                    this.books.splice(0, 1, '倚天屠龙记')

                }
            }
        })
    </script>
</body>

</html>